<template>
    <div class="container">
        <div class="top">
            <div class="tr">
                <div class="c">瓜类</div>
                <span>sum:0</span>
            </div>
            <div class="tm">
                <div class="c">桃类</div>
                <span>sum:3</span>
            </div>
            <div class="tl">
                <div class="c">莓果</div>
                <span>sum:2</span>
            </div>
        </div>
        <br>
        <div class="middle">
            <div class="mr">
                <div class="c">葡萄</div>
                <span>sum:1</span>
            </div>
            <div class="mm">
                <div class="c">热带</div>
                <span>sum:1</span>
            </div>
            <div class="ml">
                <div class="c">柚子</div>
                <span>sum:0</span>
            </div>
        </div>
        <br>
        <div class="bottom">
            <div class="br">
                <div class="c">香蕉</div>
                <span>sum:0</span>
            </div>
            <div class="bm">
                <div class="c">其他</div>
                <span>sum:0</span>
            </div>
            <div class="bl">
                <div class="c">
                    <i class="fa fa-plus"></i>
                </div>
                <button style="background-color: rgba(21, 201, 15, 0.384)">新增</button>
            </div>
        </div>
        <div>
            <button>保存</button>
            <button>取消</button>
        </div>
    </div>

</template>
<style scoped>
    .container {
        position: relative;
        left: 50px;
        top: 18px;
        padding: 50px 100px;
        width: 550px;
        height: 415px;
        background-color: rgba(190, 221, 154, 0.658);
        border-radius: 15px;
    }
    .top {
        width: 600px;
        height: 120px;
    }
    .middle {
        width: 600px;
        height: 120px;
    }
    .bottom {
        width: 600px;
        height: 120px;
    }
    .container .top .tr {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .top .tm {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        left: 15px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .top .tl {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        left: 30px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .middle .mr {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .middle .mm {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        left: 15px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .middle .ml {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        left: 30px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .bottom .br {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .bottom .bm {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        left: 15px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .container .bottom .bl {
        width: 175px;
        height: 80px;
        background-color: rgba(21, 201, 15, 0.384);
        position: relative;
        top: 20px;
        left: 30px;
        display: inline-block;
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
    }
    .c {
        width: 85px;
        height: 80px;
        background-color: rgba(88, 236, 2, 0.699);
        border: 1px solid rgb(1, 15, 7);
        border-radius: 15px;
        text-align: center;
        line-height: 80px;
        display: inline-block
    }
</style>
<script>
    module.exports = {
        data() {

            return {
            };
        },
        methods: {
        }
    };
</script>